<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>爱购首页</title>
    <link rel="icon" type="image/x-icon" href="/static/image/user/title-icon.jpg"/>
    <link rel="stylesheet" href="/static/css/user/reset.css"/>
    <link rel="stylesheet" href="/static/css/user/top.css"/>
    <link rel="stylesheet" href="/static/css/user/index.css"/>
    <link rel="stylesheet" href="/static/css/user/footer.css"/>
    <link rel="stylesheet" href="/static/css/user/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css"/>
    <script type="text/javascript" src="/static/js/user/banner.js"></script>
</head>
<body>
<!--头部-->
<div class="top" id="top">
    <!--头部bar-->
    <jsp:include page="head.jsp"></jsp:include>
    <!--logo+搜索-->
    <div class="top-header w1230 clear-float">
        <a href="index.jsp" target="_blank" class="logo">
            <img src="/static/image/user/logo.png"/>
        </a>
        <div class="top-header-right">
            <!--搜索框-->
            <div class="search clear-float">
                <input type="text" placeholder="牛奶" class="search-txt"/>
                <a href="#" class="search-btn">搜索</a>
            </div>
            <!--热搜-->
            <p class="hotkey">
                <a href="#">牛奶</a>
                <a href="#">牛仔裤</a>
                <a href="#">巧克力</a>
                <a href="#">月饼</a>
                <a href="#">抽纸</a>
                <a href="#">狗粮</a>
                <a href="#">奶粉</a>
                <a href="#">护发素</a>
                <a href="#">进口食品</a>
                <a href="#">良品铺子</a>
            </p>
        </div>
    </div>
</div>
<!--分类+banner-->
<div class="main w1230 clear-float">
    <!--商品分类-->
    <div class="classify">
        <ul>
            <c:forEach items="${productTypes}" var="ProductType">
                <li>
                    <h3><a href="#"><i class="fa fa-globe"></i>${ProductType.name}</a></h3>
                </li>
            </c:forEach>
        </ul>
    </div>
    <!--轮播-->
    <div class="banner" id="main">
        <ul id="pic">
            <c:forEach items="${carousels}" var="carousel">
                <li><a href="${carousel.jumpUrl}"><img src="/file/show?name=${carousel.imageUrl}" alt="" width="1020px"
                                                       height="360px"/></a></li>
            </c:forEach>
            <li><a href="#"><img src="" alt="" width="1020px" height="360px"/></a></li>
        </ul>
        <ul class="banner-btn" id="list">
            <c:forEach items="${carousels}">
                <li class="car-li"></li>
            </c:forEach>
        </ul>
    </div>
</div>
<!--新品+排行榜-->
<div class="new-rank w1230 clear-float">
    <a href="#" class="new-img"><img src="/file/show?name=${newProduct[0].img}" width="267px" height="400px"/></a>
    <!--新品-->
    <div class="new">
        <h3 class="title">新品</h3>
        <div class="new-list">
            <ul>
                <c:forEach items="${newProduct}" var="product">
                    <li>
                        <a href="/user/index/goodsDetail?id=${product.id}">
                            <img src="/file/show?name=${product.img}" alt="" width="90px" height="90px"/>
                            <p>${product.desc}</p>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
    <!--排行榜-->
    <div class="rank">
        <h3 class="title">排行榜</h3>
        <div class="rank-list">
            <ul>
                <c:forEach items="${products}" var="product">
                    <li>
                        <a href="/user/index/goodsDetail?id=${product.id}">
                            <span class="rank-icon1">1</span>
                            <img src="/file/show?name=${product.img}" alt="" width="90px" height="90px"/>
                            <p>${product.desc}</p>
                        </a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
<!--侧导航栏-->
<div class="c-nav">
    <ul>
        <li><a href="#global-foot" class="nav-g">${productTypes[0].name}</a></li>
        <li><a href="#cloth" class="nav-c">${productTypes[1].name}</a></li>
        <li><a href="#mod" class="nav-m">${productTypes[2].name}</a></li>
        <li><a href="#book" class="nav-b">${productTypes[3].name}</a></li>
        <li><a href="#top" class="nav-top">返回顶部</a></li>
    </ul>
</div>
<!--全球进口-->
<div class="global-foot w1230" id="global-foot">
    <h3 class="h-title">${productTypes[0].name}</h3>
    <div class="global-list">
        <ul class="clear-float">
            <c:forEach items="${productAndBrand}" var="PAndB">
                <c:if test="${PAndB.productTypeId == productTypes[0].id}">
                    <li><a href="/user/index/goodsDetail?id=${PAndB.id}">
                        <p>${PAndB.desc}</p>
                        <img src="/file/show?name=${PAndB.img}" alt="" width="150px" height="150px"/></a>
                    </li>
                </c:if>
            </c:forEach>
        </ul>
    </div>
</div>
<!--服装服饰-->
<div class="cloth w1230" id="cloth">
    <h3 class="h-title">${productTypes[1].name}</h3>
    <div class="cloth-list">
        <ul class="clear-float">
            <c:forEach items="${productAndBrand}" var="PAndB">
                <c:if test="${PAndB.productTypeId == productTypes[1].id}">
                    <li><a href="/user/index/goodsDetail?id=${PAndB.id}">
                        <div class="c-img"><img src="/file/show?name=${PAndB.img}" alt="" width="180px" height="180px"/>
                        </div>
                        <p class="c-title">${PAndB.desc}</p>
                        <span class="c-price">￥${PAndB.price}</span>
                    </a></li>
                </c:if>
            </c:forEach>
        </ul>
    </div>
</div>
<!--护肤美妆-->
<div class="mod w1230" id="mod">
    <h3 class="h-title">${productTypes[2].name}</h3>
    <div class="mod-list">
        <ul class="clear-float">
            <c:forEach items="${productAndBrand}" var="PAndB">
                <c:if test="${PAndB.productTypeId == productTypes[2].id}">
                    <li><a href="/user/index/goodsDetail?id=${PAndB.id}">
                        <img src="/file/show?name=${PAndB.img}" alt="" width="100px" height="100px"/>
                        <div class="mod-info">
                            <p class="m-title">${PAndB.desc}</p>
                            <span class="m-price">￥${PAndB.price}</span>
                        </div>
                    </a></li>
                </c:if>
            </c:forEach>
    </div>
</div>
<!--图书学习-->
<div class="book w1230" id="book">
    <h3 class="h-title">${productTypes[3].name}</h3>
    <div class="book-list">
        <ul class="clear-float">
            <c:forEach items="${productAndBrand}" var="PAndB">
                <c:if test="${PAndB.productTypeId == productTypes[3].id}">
                    <li><a href="/user/index/goodsDetail?id=${PAndB.id}">
                        <img src="/file/show?name=${PAndB.img}" alt="" width="180px" height="180px"/>
                        <p class="c-title">${PAndB.desc}</p>
                        <span class="c-price">￥${PAndB.price}</span>
                    </a></li>
                </c:if>
            </c:forEach>
        </ul>
    </div>
</div>
<!--脚注-->
<div class="footer">
    <p class="w1230">
        <a href="#">关于爱购</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
</div>
</body>
<script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
<script>
    $(".car-li:eq(0)").attr("class", "on")
</script>
</html>
